<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!-- 页眉 -->
		<!-- <iframe src="header.html" style="width: 100%; height: 190px; border: none;" scrolling="no"></iframe>
 -->

		<div id="header"></div>

		<!-- 页面主体 start -->
		<div class="main">
			<div class="container">
				<!-- 黄金广告区 -->
				<div class="gold-adv mb20">
					<img src="img/adv01.jpg" id="adv">
					<!-- 静态的处理(html+css): 加三个圆圈圈按钮, 用于切换图片内容 -->
					<div class="adv-button-box">
						<span id="adv01" class="active"></span>
						<span id="adv02"></span>
						<span id="adv03"></span>
					</div>
				</div>
				<!-- 白银广告区 -->
				<div class="silver-adv mb20">
					<ul class="clearfix">
						<li><img src="img/610400xinpinpeijian.jpg" alt=""></li>
						<li><img src="img/610400yijiuhuanxin.jpg" alt=""></li>
						<li><img src="img/489673079577637073.png" alt=""></li>
						<li><img src="img/fe6ab43348a43152b4001b4454d206ac.jpg" alt=""></li>
					</ul>
				</div>
				<!-- 热门商品 -->
				<div class="module mb20">
					<h3>热门商品</h3>
					<ul class="clearfix">
						<li style="width: 50%;">
							<img src="img/5b48a7f468bf2.webp">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li style="width: 50%;">
							<img src="img/5b48a7f468bf2.webp">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
					</ul>
				</div>
				<!-- 官方精选 -->
				<div class="module mb20">
					<h3>官方精选</h3>
					<ul class="clearfix">
						<li style="width: 50% !important;">
							<img src="img/1220858shoujilouceng.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
					</ul>
				</div>
				<!-- 品牌周边 -->
				<div class="module mb20">
					<h3>品牌周边</h3>
					<ul class="clearfix">
						<li style="width: 50% !important;">
							<img src="img/1220858shoujilouceng.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
						<li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li>
					</ul>
				</div>
				<!-- 底部白银区 -->
				<div class="silver-adv mb20">
					<ul class="clearfix">
						<li><img src="img/610400xinpinpeijian.jpg" alt=""></li>
						<li><img src="img/610400yijiuhuanxin.jpg" alt=""></li>
						<li><img src="img/489673079577637073.png" alt=""></li>
						<li><img src="img/fe6ab43348a43152b4001b4454d206ac.jpg" alt=""></li>
					</ul>
				</div>

				<!-- 要添加新的模块， 在这条线之上加入新的div即可 -->
			</div>
		</div>
		<!-- 页面主体 end -->

		<!-- 页脚 -->
		<!-- <iframe src="footer.html"  style="width: 100%; height: 375px; border: none;" scrolling="no"></iframe>
 -->

		<div id="footer"></div>

		<!-- 用js脚本的方式把header.html和footer.html包含进来 -->
		<script src="js/jquery.js">
		</script>
		
		<script>
				$('#header').load('component/header.html')
		</script>
		
		<script>
			// 单词:
			// onclick: 点击时
			// function: 函数(要做的事情)
			// attribute: 属性
			// 当点击span#adv01的时候, 把黄金广告区的img#adv的src设置为img/adv01.jpg
			$('span#adv01').on('click', function(){
				$('img#adv').attr('src', 'img/adv01.jpg')
				$('span#adv01').addClass('active')
				$('span#adv02').removeClass('active')
				$('span#adv03').removeClass('active')
			})
			// 当点击span#adv02的时候, 把黄金广告区的img#adv的src设置为img/adv02.jpg
			$('span#adv02').on('click', function(){
				$('img#adv').attr('src', 'img/adv02.jpg')
				$('span#adv01').removeClass('active')
				$('span#adv02').addClass('active')
				$('span#adv03').removeClass('active')
			})
			// 当点击span#adv03的时候, 把黄金广告区的img#adv的src设置为img/adv03.jpg
			$('span#adv03').on('click', function(){
				$('img#adv').attr('src', 'img/adv03.jpg')
				$('span#adv01').removeClass('active')
				$('span#adv02').removeClass('active')
				$('span#adv03').addClass('active')
			})
		</script>
		
	</body>
</html>
